import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { ItemCard } from '@components'
import './index.scss'

export default class OrderCard extends Component {
  static defaultProps = {
    key: '',
    order: {},
    type: '',
    onCancel: () => {},
    onPay: () => {},
    onConfirm: () => {},
    onDelete: () => {},
    onLogistics: () => {}
  }

  handleClick = () => {
    const { order } = this.props
    Taro.navigateTo({
      url: `/pages/orderInfo/orderInfo?orderNo=${order.orderNo}`
    })
  }

  handleCancel = (orderNo, type) => {
    this.props.onCancel(orderNo, type)
  }

  handlePay= (orderNo, type) => {
    this.props.onPay(orderNo, type)
  }

  handleConfirm= (orderNo, type) => {
    this.props.onConfirm(orderNo, type)
  }

  handleDelete= (orderNo, type) => {
    this.props.onDelete(orderNo, type)
  }

  handleLogistics= (orderNo) => {
    this.props.onLogistics(orderNo)
  }

  render () {
    const { order, type  } = this.props
    const { itemList = [] } = order
    const firstItem = itemList[0]

    return (
      <View className='order-card'>

        <View className='order-header'>
          <Text className='order-header-no'>订单编号:{order.orderNo}</Text>
          <Text className='order-header-status'>{order.orderStatus}</Text>
        </View>

        {itemList.length > 1 ?
          <View className='order-item' onClick={this.handleClick.bind(this)}>
            <View className='order-item-l'>
              {itemList.map((item, index) =>
                <Image key={index} className='order-item-l-img' src={item.itemImage} />
              )}
            </View>
            <View className='order-item-r'>
              <View className='order-item-r-price'>
                {'¥ ' + order.payAmount}
              </View>
              <View className='order-item-r-num'>
                {'共' + order.totalNum + '件'}
              </View>
            </View>
          </View>
          :
          <ItemCard item={firstItem} onClick={this.handleClick.bind(this)} />
        }
        {
          {
            '待付款':
              <View className='order-footer'>
                <View className='order-btn' onClick={this.handleCancel.bind(this, order.orderNo, type)}>
                  <Text className='order-btn-txt'>取消订单</Text>
                </View>
                <View className='order-btn order-btn--active' onClick={this.handlePay.bind(this, order.orderNo, type)}>
                  <Text className='order-btn-txt'>去支付</Text>
                </View>
              </View>,
            '待发货':
              <View className='order-footer'>
                <View className='order-btn' onClick={this.handleCancel.bind(this, order.orderNo, type)}>
                  <Text className='order-btn-txt'>取消订单</Text>
                </View>
              </View>,
            '待收货':
              <View className='order-footer'>
                <View className='order-btn'>
                  <Text className='order-btn-txt' onClick={this.handleLogistics.bind(this, order.orderNo)}>查看物流</Text>
                </View>
                <View className='order-btn order-btn--active' onClick={this.handleConfirm.bind(this, order.orderNo, type)}>
                  <Text className='order-btn-txt'>确认收货</Text>
                </View>
              </View>,
            '已完成':
              <View className='order-footer'>
                <View className='order-btn' onClick={this.handleDelete.bind(this, order.orderNo, type)}>
                  <Text className='order-btn-txt'>删除订单</Text>
                </View>
                <View className='order-btn'>
                  <Text className='order-btn-txt' onClick={this.handleLogistics.bind(this, order.orderNo)}>查看物流</Text>
                </View>
                {/*<View className='order-btn order-btn--active'>*/}
                {/*  <Text className='order-btn-txt'>评价晒单</Text>*/}
                {/*</View>*/}
              </View>,
            '已取消':
              <View className='order-footer'>
                <View className='order-btn' onClick={this.handleDelete.bind(this, order.orderNo, type)}>
                  <Text className='order-btn-txt'>删除订单</Text>
                </View>
              </View>
          }[order.orderStatus]
        }
      </View>
    )
  }
}
